import {Component} from "react";
import avatar from "../images/avatar.png";
class Form extends Component{
  state = {
    content: ''
  }

  handleChange=(e)=>{
    // console.log(e.target.value);
    this.setState({
      content:e.target.value
    })
    }

    add=()=>{
      if (this.state.content==='') {
        return
      }
      this.props.addList(this.state.content)
      this.setState({
        content:''
      })
     
    }
  render(){
    return(
      <div className="comment-send">
      <div className="user-face">
        <img className="user-head" src={avatar} alt="" />
      </div>
      <div className="textarea-container">
        <textarea
          cols="80"
          rows="5"
          placeholder="发条友善的评论"
          value={this.state.content}
          onChange={this.handleChange}
          className="ipt-txt"
 
        />
        <button className="comment-submit" onClick={this.add}>发表评论</button>
      </div>
      <div className="comment-emoji">
        <i className="face"></i>
        <span className="text">表情</span>
      </div>
    </div>
    )
  }
}

export default Form